![jQuery Mobile ボタンのアイコン](https://devio2023-media.developers.io/wp-content/uploads/2011/11/jQueryMobile.png)
jQuery Mobile ボタンのアイコン
はじめに
jQuery Mobileではフレームワークとしてボタンのアイコンが15個のアイコンが用意されています。殆どこれでだけ足りるのではないでしょうか。今回はアイコンの使い方について紹介します。
使ってみる
アイコンはdata-icon="{アイコンの名前}"で指定します。簡単ですね。
<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>
この例では、左向き矢印のアイコンを表示できます。また、data-iconpos="{left,right,top,buttom,notext}"でアイコンの表示位置を指定できます。notextの場合はアイコン画像だけが表示されます。
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">arrow-l</a>
サンプル
アイコン15個(ボタンのラベルにアイコン名を入れました)と表示位置5個のサンプルを作りました。ページ毎にテーマを変えています。各テーマの雰囲気と共に参考にしてみてください。